<template>
	<view class="prop-mask" v-if="show">
		<view class="card-prop" :style="{width:width+'rpx'}">
			<view class="title">
				<img class="top-img" :src="topImg" alt="">
				{{title}}
			</view>
			<view class="content">
				<slot></slot>
			</view>

			<view class="btn-box" v-if="btn">
				<view class="btn light" @click="close">
					{{btnCancel}}
				</view>
				<view class="btn" @click="confirm">
					{{btnConfirm}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "Dialog",
		props: {
			topImg: {
				type: String,
				default: '/static/images/bg-header/bell.png'
			},
			title: {
				type: String,
				default: '提示'
			},
			width: {
				type: Number,
				default: 640
			},
			show: {
				type: Boolean,
				default: false
			},
			btn: { //是否显示按钮
				type: Boolean,
				default: true
			},
			btnConfirm: {
				type: String,
				default: '确定'
			},
			btnCancel: {
				type: String,
				default: '取消'
			}
			// closeIcon:{
			// 	type:Boolean,
			// 	default:true
			// }
		},
		data() {
			return {

			};
		},
		methods: {
			confirm() {
				// this.$emit('update:show', false)
				this.$emit('confirm')
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.prop-mask {
		height: calc(100vh);
		width: calc(100vw);
		background-color: rgba($color: #000000, $alpha: 0.4);
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
	}

	.card-prop {
		background: linear-gradient(#CEE3FE 0%, #FFFFFF 50%);
		border-radius: 24rpx;
		padding: 40upx;
		position: relative;
		padding-top: 124upx;
		max-height: 80vh;
		margin-top: -20%;

		.title {
			// margin: 0 20rpx;
			// // border-bottom: 3rpx solid rgba($color: #d4d4d4, $alpha: .7);
			// height: 100rpx;
			// justify-content: space-between;
			// align-items: center;
			// color: $text-color-card-title;
			// font-size: 34rpx;

			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 36upx;
			color: #000000;
			text-align: center;
			margin-bottom: 32upx;
			position: relative;

			.top-img {
				width: 144upx;
				height: 144upx;
				position: absolute;
				top: -124upx;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.content {
			max-height: calc(80vh - 110px);
			overflow-y: auto;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: rgba(0, 0, 0, 0.7);
			line-height: 56upx;

			::v-deep.tform {
				.tform-item {
					padding-top: 16upx;
					padding-bottom: 16upx;
					line-height: 44upx;
				}
			}

		}

		.btn-box {
			display: flex;
			justify-content: space-between;
			gap: 34upx;
			width: 100%;
			height: 64upx;
			margin-top: 64upx;

			.btn {
				flex: 1;
				// width: 122upx;
				height: 64upx;
				background: $theme-color;
				border-radius: 64upx;
				text-align: center;
				line-height: 64upx;
				color: #FFF;
				font-size: 24upx;
			}

			.light {
				background: transparent;
				border: 1px solid $theme-color;
				color: $theme-color;
			}
		}
	}
</style>